<template>
	<view class="_flex">
		<template v-for="menu in $store.state.menu.menus.filter(item => !item.parent_id)">
			<view class="_p5 _radius-15p _ellipsis menu-item" :class="menu.active ? 'menu-item-active' : ''"
				style="max-width: 80px;" @click="selectMenu(menu)">
				{{ menu.text }}
			</view>
		</template>
	</view>
</template>

<script>
	import config from '@/admin.config.js';
	import {
		mapMutations,
		mapState,
		mapActions
	} from 'vuex';

	export default {
		async mounted() {
			await this.initMenus();
		},
		methods: {
			...mapActions("menu", ["initMenus", "updateCurrentMenu"]),
			selectMenu(menu) {
				this.updateCurrentMenu(menu);
			}
		}
	}
</script>

<style scope>
	.menu-item:hover {
		color: #3f9dfd;
	}

	.menu-item-active {
		color: #3f9dfd;
		border-bottom: 2px solid #3f9dfd;
	}
</style>
